import { useState, useRef } from 'react';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import MySelect from '../components/MySelect';
import { Input, InputNumber, DatePicker, message } from 'antd';
import { UPLOAD_URL } from '../constants';
const { TextArea } = Input;
// 生成一个通用的必选rule
export const rule = (msg) => {
  return {
    required: true,
    message: '请输入' + msg,
  };
};
export function useOptions(initArr) {
  const [options, setOptions] = useState(initArr);
  return [options, setOptions];
}

const props = {
  name: 'file',
  action: 'http://localhost:3000/upload/img',
  headers: {
    authorization: 'authorization-text',
  },

  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }

    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
// 自定义hook
export function useData({ initArr, callback }) {
  const [levelOptions] = useOptions([1, 2, 3, 4, 5]);
  const [typeOptions] = useOptions(['刮擦', '碰撞', '追尾', '其它']);
  if (initArr) {
    return useState(initArr);
  }
  const [formData, setFormData] = useState([
    {
      label: '事件等级',
      name: 'level',
      rules: [rule('事件等级')],
      slot: MySelect({ options: levelOptions }),
    },
    {
      label: '事件分类',
      name: 'type',
      rules: [rule('事件分类')],
      slot: MySelect({ options: typeOptions }),
    },
    {
      label: '事件内容',
      name: 'content',
      rules: [rule('事件内容')],
      slot: <TextArea />,
    },
    {
      label: '事件时间',
      name: 'time',
      rules: [rule('事件时间')],
      slot: <DatePicker renderExtraFooter={() => 'extra footer'} showTime />,
    },
    {
      label: '事件图片',
      name: 'img',
      valuePropName: 'url',
      url: '',
      getValueFromEvent: normFile,
      slot: 'upload',
    },
    {
      label: '事件地点',
      name: 'addr',
      rules: [rule('事件地点')],
      slot: <Input />,
    },
    {
      label: '建筑标志',
      name: 'sign',
      slot: <Input />,
    },
    {
      label: '影响范围',
      name: 'radius',
      rules: [rule('事件影响范围')],
      slot: <InputNumber />,
    },
  ]);

  return [formData, setFormData];
}

const handleChange = ({ file, fileList, event }) => {
  console.log('hello');
  console.log(file);
  console.log(fileList);
  console.log(event);
};
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 5;
  if (!isLt2M) {
    message.error('Image must smaller than 5MB!');
  }
  return isJpgOrPng && isLt2M;
};
// 自定义获取字段值的事件
const normFile = (e) => {
  console.log('Upload event:', e);

  if (Array.isArray(e)) {
    return e;
  }
  let url = '';
  if (e.fileList[0].status == 'done') {
    url = e.fileList[0].response.imageUrl;
  }
  return url;
};
// 预览图片
export const preview = async (file) => {
  console.log(file);
  let url = file.url || file.response.imageUrl;

  window.open(url, '_blank');
};
const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = (error) => reject(error);
  });
